<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <link rel="stylesheet" th:href="@{/diaShop/css/common.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/diaShop/css/style.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/diaShop/fonts/iconfont.css}" type="text/css"/>
    <script th:src="@{/diaShop/js/jquery-1.9.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/diaShop/js/jqzoom.js}" type="text/javascript"></script>
    <script th:src="@{/diaShop/js/jquery.SuperSlide.2.1.1.js}" type="text/javascript"></script>
    <script th:src="@{/diaShop/js/common_js.js}" type="text/javascript"></script>
    <script th:src="@{/diaShop/js/footer.js}" type="text/javascript"></script>
    <script th:src="@{/diaShop/js/lrtk.js}" type="text/javascript"></script>
    <script th:src="@{/js/layer/layer.js}"></script>
    <title>产品详细页</title>
</head>
<body>
<div th:replace="diaShop/layout/mallHeader"></div>

<!--产品详细页介绍-->
<div class="Inside_pages">
    <!--位置-->
    <div class="Location_link">
        <em></em><a href="#">进口食品、进口牛</a> &lt; <a href="#">进口饼干/糕点</a> &lt; <a href="#"
                                                                               th:text="${goods.sku.name}">产品名称</a>
    </div>
    <!--产品详细介绍-->
    <div class="Details_style clearfix" id="goodsInfo">
        <div class="mod_picfold clearfix">
            <div class="clearfix" id="detail_main_img">
                <div class="layout_wrap preview">
                    <div class="bigImg" id="vertical">
                        <img alt="" height="" id="midimg" th:src="@{${goods.sku.url}}" width=""/>
                        <div id="winSelector" style="display:none;"></div>
                    </div>
                    <div class="smallImg">
                        <div class="scrollbutton smallImgUp disabled">&lt;</div>
                        <div id="imageMenu">
                            <ul>
                                <li th:each="g:${goods.images}"><img alt="洋妞" height="68" th:src="@{${g}}" width="68"/>
                                </li>

                            </ul>
                        </div>
                        <div class="scrollbutton smallImgDown">&gt;</div>
                    </div><!--smallImg end-->
                    <div id="bigView" style="display:none;">
                        <div><img alt="" height="800" src="" width="800"/></div>
                    </div>
                </div>
            </div>
            <div class="Sharing">
                <div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1455606466202"><a class="bds_more"
                                                                                                       data-cmd="more"
                                                                                                       href="#">分享到：</a><a
                        class="bds_qzone" data-cmd="qzone" href="#" title="分享到QQ空间"></a><a class="bds_tsina"
                                                                                           data-cmd="tsina"
                                                                                           href="#"
                                                                                           title="分享到新浪微博"></a><a
                        class="bds_tqq" data-cmd="tqq" href="#" title="分享到腾讯微博"></a><a class="bds_renren"
                                                                                       data-cmd="renren"
                                                                                       href="#"
                                                                                       title="分享到人人网"></a><a
                        class="bds_weixin"
                        data-cmd="weixin"
                        href="#"
                        title="分享到微信"></a>
                </div>

                <!--收藏-->
                <div class="Collect"><a href="javascript:collect(92)"><em class="ico1"></em>收藏商品( 2345 )</a></div>
            </div>
        </div>
        <!--信息样式-->
        <div class="textInfo">

            <div class="title"><h1 th:text="${goods.sku.name}">Mixx 炼乳奶酪饼干</h1>
                <p th:text="${goods.sku.subtitle}">进口饼干糕点 西式糕点 休闲轻松</p></div>
            <div class="mod_detailInfo_priceSales">
                <div class="margins">
                    <div class="Price clearfix"><label>价格</label><span th:text="${goods.sku.price}">¥10.9
                            <b></b></span></div>
                    <div class="Activity clearfix"><label>活动</label><span>指定商品满¥50，可换购以下任一商品</span></div>
                </div>
                <div class="s_Review">
                    <a href="#">销量<b th:text="${goods.spu.sale}"></b>[浏览<b th:text="${goods.spu.hit}">87653</b>条]</a>
                </div>
            </div>
            <div class="buyinfo" id="detail_buyinfo">
                <dl>
                    <dt>数量</dt>
                    <dd>
                        <div class="choose-amount left">
                            <a class="btn-reduce" href="javascript:;" onclick="">-</a>
                            <a class="btn-add" href="javascript:;" onclick="">+</a>
                            <input class="text" id="count" onkeyup="" value="1">
                            <input id="goodsid" th:hidden="true" th:value="${goods.id}"/>
                        </div>
                        <div class="P_Quantity">剩余：<b th:text="${goods.sku.stock}"></b></div>
                    </dd>
                    <dd>
                        <div class="wrap_btn"><a class="wrap_btn1" onclick="addCart(1)"
                                                 title="加入购物车"></a>
                            <a class="wrap_btn2" onclick="addCart(2)" title="立即购买"></a></div>
                    </dd>
                </dl>
            </div>
            <div class="Guarantee clearfix">
                <dl>
                    <dt>支付方式</dt>
                    <dd><em></em>货到付款（部分地区）</dd>
                    <dd><em></em>在线支付</dd>
                    <dd>
                        <div class="payment" id="payment">
                            <a class="paybtn" href="javascript:void(0);">支付方式<span
                                    class=" iconfont icon-unfold"></span></a>
                            <ul>
                                <li>货到付款</li>
                                <li>礼品卡支付</li>
                                <li>网上支付</li>
                                <li>银行转账</li>
                            </ul>
                        </div>
                    </dd>
                </dl>
            </div>

        </div>
        <!--产品推荐-->
        <div class="Recommend">
            <div class="title_name">同类产品推荐</div>
            <div class="Recommend_list">
                <ul>
                    <li class="clearfix" th:each="typeGoods:${goodsList}">
                        <div class="pic_img"><a th:href="@{'/diaShop/goodsDetail/'+${typeGoods.id}}">
                            <img data-bd-imgshare-binded="1" th:src="@{${typeGoods.url}}"></a>
                        </div>
                        <div class="r_content">
                            <div class="title">
                                <a th:href="@{'/diaShop/goodsDetail/'+${typeGoods.id}}"
                                   th:text="${typeGoods.name}">金龙鱼 </a></div>
                            <div class="p_Price" th:text="${typeGoods.price}">￥32.50</div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <!--信息内容-->
    <div class="detailed_info clearfix">
        <div class="left_style">
            <div class="Records">
                <div class="title_name">用户浏览记录</div>
                <ul>
                    <li th:each="viewGoods,starStat:${viewGoodslist}"
                        th:if="${starStat.count lt 4}" th:unless="${#lists.isEmpty(goodsList)}">
                        <a th:href="@{'/diaShop/goodsDetail/'+${viewGoods.id}}">
                            <p><img data-bd-imgshare-binded="1" th:src="@{${viewGoods.url}}"></p>
                            <p class="p_name" th:text="${viewGoods.name}">San律宾进口</p>
                        </a>
                        <p><span class="p_Price" th:text="'￥'+${viewGoods.price}">￥5.30</span>
                            <b th:text="'￥'+${viewGoods.price}">10.4</b></p>
                    </li>

                </ul>
            </div>
        </div>
        <!---->
        <div class="right_style ">
            <div id="recommnad">
                <dl class="recommnad explosion ">
                    <dt><i></i>同类销售商品排行榜</dt>
                    <dd class="bordernone" data-hover="hover" th:each="com,stat:${goodsList}">
	   <span>
	    <a class="pic" th:href="@{'/diaShop/goodsDetail/'+${com.id}}">
            <img data-bd-imgshare-binded="1" height="130" th:src="@{${com.url}}" width="130"></a>
		<a class="tit" th:href="@{'/diaShop/goodsDetail/'+${com.id}}" th:text="${com.name}">Gullon谷优</a>
		<p th:text="${com.price}">￥39.00</p>
		<a class="commandbtn" href="#" th:onclick="'addCart1('+${com.id}+')'">加入购物车</a>
	   </span>
                        <div class="exp_ico one" th:text="${stat.count}">2</div>
                    </dd>

                </dl>
            </div>
            <div class="inDetail_boxOut">
                <div class="inDetail_box">
                    <div class="fixed_out ">
                        <ul class="inLeft_btn">
                            <li><a class="current" href="#shangpsx" id="property-id">商品属性</a></li>
                            <li><a href="#shangpjs" id="detail-id">规格与包装</a></li>
                            <li><a href="#miqsp" id="shot-id">售后服务</a></li>
                            <li><a href="#coms1" id="coms1-id">买家评论</a></li>
                        </ul>
                        <div class="subbuy">
                            <span class="extra currentPrice"> ¥29.90</span>
                            <a class="extra  notice J_BuyButtonSub" href="#">立即购买</a></div>
                    </div>
                </div>
            </div>
            <!--信息-->
            <div id="shangpsx">
                <table>
                    <tr>
                        <td class="lable">商品名称</td>
                        <td>憨厚护肤套装</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<div th:replace="diaShop/layout/mallFooter"></div>
<script type="text/javascript">
    $("#collect1").hide();
    $("#qucollect1").hide();
    function addCart(type){
        var count=$("#count").val();
        var goodsid=$("#goodsid").val();
        $.ajax({
            type: "post",
            url: '/person/diaShop/addCart',
            data: {
                goodsid:goodsid,
                count:count},
            dataType: "json",
            success:function(data) {
                if(data.code==0){
                    if(type==1){
                        layer.msg("加入购车成功!",2, 8);
                    }else{
                        var goodsid1=$("#goodsid").val();
                        window.location.href = "/person/diaShop/likBuy/"+goodsid1;
                    }
                }else if(data.success=='login'){
                    window.location.href = "/diaShop/login"
                }
            }
        });
    }
    function addCart1(goodsid){
        console.log(goodsid);
        var count=1;
        $.ajax({
            type: "post",
            url: '/person/diaShop/addCart',
            data: {
                goodsid:goodsid,
                count:count},
            dataType: "json",
            success:function(data) {
                if(data.code==0){
                    window.location.href = "/person/diaShop/likBuy/"+goodsid;
                }else if(data.success=='login'){
                    window.location.href = "/diaShop/login"
                }
            }
        });
    }
    // 收藏
    function collect(goodsid){
        $.ajax({
            type: "post",
            url: '/person/diaShop/favorite-add',
            data: {
                goodsid:goodsid,
                type:1},
            dataType: "json",
            success:function(data) {
                if(data.code==0){
                    $("#collect").hide();
                    $("#qucollect").show();
                    layer.msg("收藏成功!");
                }else{
                    layer.msg(data.msg);
                }
            }
        });
    }
    // 取消收藏
    function qucollect(goodsid){
        $.ajax({
            type: "post",
            url: '/person/diaShop/favorite-add',
            data: {
                goodsid:goodsid,
                type:1},
            dataType: "json",
            success:function(data) {
                if(data.code==0){
                    $("#collect").show();
                    $("#qucollect").hide();
                    layer.msg("取消收藏成功!");
                }else{
                    layer.msg(data.msg);
                }
            }
        });
    }
    function addRePly(){
        var content=$("#say_some").val();
        var goodsid=$("#goodsid").val();
        $.ajax({
            type: "post",
            url: '/person/diaShop/addRePly',
            data: {content:content,goodsid:goodsid},
            dataType: "json",
            success:function(data) {
                if(data.success){
                    layer.msg("评论成功!",{icon:2});

                }else{
                    layer.msg("评论失败!",{icon:2});
                }
            }
        });
    }



</script>
</body>
</html>
